<!DOCTYPE HTML>
<html>
    <!--
     Safari Extension Popup Page
     
     calls global HTML functions using the form:
     safari.extension.globalPage.contentWindow.functionName()
     
     -->
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>PasswordMaker for Safari</title>
        <link rel="stylesheet" type="text/css" href="passwordmaker.css" />
            <script type='text/javascript'>
                const myGlobal = safari.extension.globalPage.contentWindow;
                var currentProfile = null;
                var currentUrl     = null;
                
                function popoverHandler(event) {
                    // startup with the URL from the current Tab
                    if( event.target.identifier == "passwordMakerPopover" ) {
                        // Save the full URL for later
                        currentUrl = safari.application.activeBrowserWindow.activeTab.url;
                    
                        // Set the initial options programmatically
                        var profileNode = document.getElementById('profile');
                        var lastProfile = profileNode.value;
                        profileNode.options.length = 0;
                        var profiles = myGlobal.getProfileNames();
                        for( var p in profiles ) {
                            // select the last used profile - TODO: Should select a saved profile based on the url/hostname!
                            var newopt = new Option(profiles[p], profiles[p], (profiles[p]=='Default'), (profiles[p]==lastProfile) );
                            profileNode.options.add( newopt );
                        }

                        // load the initial selections
                        if( myGlobal.getMasterPassword() > "" ) {
                            document.getElementById('password').value = myGlobal.getMasterPassword();
                            document.getElementById('store_location').value = "disk";
                        }
                        safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("getProfile");
                        loadProfile();
                    } else {
                        //console.log("Unexpected event: ");
                        //console.dir(event);
                    }
                    
                }
                
                function messageHandler(event) {
                    if( event.name == "getProfileResponse" ) {
                        // load a profile...
                        document.getElementById('profile').value = event.message;
                        loadProfile();
                    } 
                    else {
                        //console.log('unexpected message: ', event.name );
                    }
                }
                
                function loadProfile() {
                    var profileNode = document.getElementById('profile');
                    currentProfile = myGlobal.getProfile( profileNode.value );

                    var myUrl = myGlobal.parseURL(currentUrl,currentProfile);                    
                    document.getElementById('usedtext').value = myUrl; 

                    getPassword();
                }
                
                function saveSiteProfile() {
                    // save this profile for this site - use
                    myGlobal.saveSiteProfile( currentUrl, currentProfile.name );
                }
                
                function getPassword() {
                    // generatepassword(hashAlgorithm, key, data, whereToUseL33t, l33tLevel, passwordLength, charset, prefix, suffix) {
                    
                    var passwordVal = myGlobal.generatepassword( currentProfile.hashAlgorithm,
                                                                document.getElementById('password').value,
                                                                document.getElementById('usedtext').value,
                                                                currentProfile.whereL33t,
                                                                currentProfile.l33tLevel,
                                                                currentProfile.passwordLength,
                                                                currentProfile.charset,
                                                                currentProfile.passwordPrefix,
                                                                currentProfile.passwordSuffix );
                                        
                    document.getElementById('generated').value = passwordVal;
                }
                
                
                function copyPassword() {
                    document.getElementById('generated').select();
                    
                    // remember that this profile was used!
                    safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("setProfile", currentProfile.name );
                }
                
                function fillPassword() {
                    var passwordVal = document.getElementById('generated').value;
                    safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("fillPassword", passwordVal );
                    safari.self.hide();

                    // remember that this profile was used!
                    safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("setProfile", currentProfile.name );
                }
                
                function showOptions() {
                    var newTab = safari.application.activeBrowserWindow.openTab();
                    newTab.url = safari.extension.baseURI + 'options.html';
                    safari.self.hide();
                }
                
                function hideHandler() {
                    // what should we do with the password now?
                    var store = document.getElementById('store_location').value;
                    
                    if( store == "never" ) {
                        document.getElementById('password').value = '';
                        myGlobal.setMasterPassword(null);
                    }
                    else if( store == "disk" ) {
                        myGlobal.setMasterPassword( document.getElementById('password').value );
                    }
                    else {
                        myGlobal.setMasterPassword(null);
                    }
                }

                
                //
                // add the listeners immediately
                //
                {
                    safari.application.addEventListener("popover", popoverHandler, false);
                    safari.application.addEventListener("message", messageHandler, false);
                    window.addEventListener("blur", hideHandler, false);
                }


        </script>
    </head>
    <body>
        <div id='head'>
            <img src='ring-16x16.png' width='16' height='16' alt=""/>
            <span>PasswordMaker : Safari</span>
        </div>
        <div><form>
            <div class='row'>
                <label for='password'>Password:</label>
                <input class='input' id='password' type="password" autofocus onkeypress='getPassword()' onchange='getPassword()'/>
            </div>
            <!-- <div class='row' id='confirmation_row'><label for='confirmation'>Confirmation:</label><input class='input' id='confirmation' type="password"/></div> -->
            <div class='row' id="store_location_row"><label>Save Password:</label>
                <select id="store_location" name="store_location">
                    <option value="never">Never store</option>
                    <option value="memory">In memory</option>
                    <option value="disk">On disk</option>
                </select>    
            </div>
            <div class='row'><label>Use Profile:</label>
                <select id="profile" name="profile" onchange="loadProfile()">
                </select>    
            </div>
            <div class='row'><label for='usedtext'>Used text:</label><input class='input' id='usedtext' onchange="getPassword()"/></div>
            <div class='row'>
                <label for='generated'>Generated Password:</label>
                <input id='generated' class='input' readonly value=""/>
                <!-- <a id='activatePassword' class="awesome button largebutton" href="#" onclick="showPasswordField();">Show password</a> -->
            </div>
            <div class='row' id='button-row'>
                <span id="copypassword"><input class="button" type="button" value="Copy" onClick="copyPassword();"/></span>
                <span id="injectpasswordrow"><input class="button" type="button" value="Fill field" onClick="fillPassword();"/></span>
                <span id='options'><input class="button" type="button" value="Options" onClick="showOptions();"/></span>
            </div>
            <div class='hidden'>
                <input type='text' id='generatedForClipboard' value='' />
            </div>
        </form></div>
    </body>
</html>